<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false" clrModalSize="xl">
  <h3 class="modal-title">添加Ceph</h3>
  <div class="modal-body modal-height">
    <form clrForm #itemForm='ngForm' style="vertical-align:middle;">
      <clr-input-container>
        <label>名称:</label>
        <input clrInput size=50 maxlength="15" type="text" pattern="{{name_pattern}}" [(ngModel)]="item.name"
               name="name" required>
        <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>
        <clr-control-error>{{name_pattern_tip}}</clr-control-error>
      </clr-input-container>
      <clr-input-container>
        <label>Monitor:</label>
        <input clrInput size=50 maxlength="100" type="text" [(ngModel)]="item.vars['ceph_monitor']"
               name="monitor" required>
        <clr-control-helper>例：172.16.10.160:6789,172.16.10.161:6789,172.16.10.168:6789</clr-control-helper>
      </clr-input-container>
      <clr-input-container>
        <label>OSD 存储池:</label>
        <input clrInput size=50 maxlength="30" type="text" [(ngModel)]="item.vars['ceph_osd_pool']"
               name="osd_pool" required>
      </clr-input-container>
      <clr-input-container>
        <label>Admin 用户:</label>
        <input clrInput size=50 maxlength="50" type="text" [(ngModel)]="item.vars['ceph_admin_id']"
               name="admin" required>
        <clr-control-helper>能够在存储池中创建的客户端ID 默认:admin</clr-control-helper>
      </clr-input-container>
      <clr-input-container>
        <label>Admin Secret:</label>
        <input clrInput size=50 maxlength="50" type="text" [(ngModel)]="item.vars['ceph_admin_secret']"
               name="admin_secret" required>
        <clr-control-helper>可在 ceph 服务端通过以下命令获得:ceph auth get-key client.admin</clr-control-helper>
      </clr-input-container>
      <clr-input-container>
        <label>User 用户:</label>
        <input clrInput size=50 maxlength="50" type="text" [(ngModel)]="item.vars['ceph_user_id']"
               name="user" required>
        <clr-control-helper>用于映射RBD的ceph客户端ID 默认: admin</clr-control-helper>
      </clr-input-container>
      <clr-input-container>
        <label>User Secret:</label>
        <input clrInput size=50 maxlength="50" type="text" [(ngModel)]="item.vars['ceph_user_secret']"
               name="user_secret" required>
        <clr-control-helper>可在 ceph 服务端通过以下命令获得:ceph auth get-key client.admin</clr-control-helper>
      </clr-input-container>
      <clr-select-container>
        <label>存储卷文件系统:</label>
        <select clrSelect [(ngModel)]="item.vars['ceph_fsType']" name="ceph_fsType">
          <option value="ext4">ext4</option>
          <option value="xfs">xfs</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label>Ceph RBD 格式:</label>
        <select clrSelect [(ngModel)]="item.vars['ceph_imageFormat']" name="ceph_imageFormat">
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </clr-select-container>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()" [disabled]="isSubmitGoing">取消</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                [disabled]="isSubmitGoing || itemForm.invalid">
          <i *ngIf="isSubmitGoing " class="fa fa-spinner fa-pulse"></i>提交
        </button>
      </div>
    </form>
  </div>
</clr-modal>
